<template>
    <button :disabled="disabled || loading" class="g-button"
        @click="handleClick"
        :autofocus="autofocus"
        type="button"
        :class="[
            type ? type : '',
            size ? size : '',
            {
                'is-round': round,
                'is-disabled': disabled,
                'is-loading': loading
            }
        ]">
        <!-- <i class="iconfont icon-loading icon-pulse" v-if="loading"></i> -->
        <!-- <img src="../../../../static/img/loading.svg" v-if="loading"> -->

        <img src="" v-if="loading">
        <i class="iconfont" :class="'icon-' + icon" v-if="icon && !loading"></i>

        
        <span v-if="$slots.default"><slot></slot></span>
    </button>
</template>

<script>
export default {
    name: 'GButton',
    props: {
        type: {
            type: String,
            default: 'default'
        },
        icon: {
            type: String,
            default: ''
        },
        size: String,
        round: Boolean,
        loading: Boolean,
        disabled: Boolean,
        autofocus: Boolean
    },
    methods: {
        handleClick( event ) {
            if ( this.loading || this.disabled ) return;
            this.$emit( 'click', event );
        }
    }
};


</script>

<style lang="scss">
@import 'common';
.g-button {
    display: inline-block;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid #bfcbd9;
    color: #4087f7;
    border-color: #4087f7;
    margin: 0;
    border-radius: 3px;
    padding: 0 12px;
    min-width: 70px;
    height: 30px;
    line-height: 28px;


    &[class*=g-icon-]+span {
        margin-left: 5px;
    }

    img {
        position: relative;
        top: 3px;
        width: 16px;
    }

    &.small {
        height: 24px;
        line-height: 22px;

        img {
            position: relative;
            top: 3.2px;
            width: 12px;
        }
    }

    &.large {
        height: 32px;
        line-height: 30px;
        
        img {
            position: relative;
            top: 4px;
            width: 16px;
        }
    }

    &.is-round {
        border-radius: 14px;
        padding: 0 16px;

        &.small {
            border-radius: 12px;
        }
        &.large {
            border-radius: 16px;
        }
    }

    &:focus,
    &:hover {
        color: lighten( #4087f7, 10% );
        border-color: lighten( #4087f7, 10% );
    }

    &:active {
        color: $darkPrimary;
        border-color: $darkPrimary;
    }

    &.text {
        border: none;
        color: #4087f7;
        background: 0 0;
        padding-left: 0;
        padding-right: 0;

        &:focus,
        &:hover {
            color: #4db3ff;
        }

        &:active {
            color: #1d90e6;
        }
    }
    
    &.default {
        color: #363c3e;
        background-color: #fff;
        border-color: #d4d8db;

        &:focus,
        &:hover {
            color: #4087f7;
            border-color: #4087f7;
        }

        &:active {
            color: #4087f7;
            border-color: #4087f7;
        }
    }

    &.primary {
        color: #fff;
        background-color: #4087f7;
        border-color: #4087f7;

        &:focus,
        &:hover {
            background: #4087f7;
            color: #fff;
            border-color: lighten( #4087f7, 10% );
        }

        &:active {
            background: #4087f7;
            border-color: #4087f7;
            color: #fff;
        }
    }

    &.info {
        color: #fff;
        background-color: #4087f7;
        border-color: #4087f7;

        &:focus,
        &:hover {
            background: #73ccff;
            border-color: #73ccff;
            color: #fff;
        }

        &:active {
            background: #48ace6;
            border-color: #48ace6;
            color: #fff;
        }
    }

    &.success {
        color: #fff;
        background-color: #13ce66;
        border-color: #13ce66;

        &:focus,
        &:hover {
            background: #42d885;
            border-color: #42d885;
            color: #fff;
        }

        &:active {
            background: #11b95c;
            border-color: #11b95c;
            color: #fff;
        }
    }

    &.warning {
        color: #fff;
        background-color: #f7ba2a;
        border-color: #f7ba2a;

        &:focus,
        &:hover {
            background: #f9c855;
            border-color: #f9c855;
            color: #fff;
        }

        &:active {
            background: #dea726;
            border-color: #dea726;
            color: #fff;
        }
    }

    &.danger {
        color: #fff;
        background-color: #ff4949;
        border-color: #ff4949;

        &:focus,
        &:hover {
            background: #ff6d6d;
            border-color: #ff6d6d;
            color: #fff;
        }

        &:active {
            background: #e64242;
            border-color: #e64242;
            color: #fff;
        }
    }

    &.is-loading {
        position: relative;
        pointer-events: none;

        &:before {
            content: '';
            position: absolute;
            left: -1px;
            top: -1px;
            right: -1px;
            bottom: -1px;
            border-radius: inherit;
            background-color: rgba(255, 255, 255, .35);
        }
    }


    &.is-disabled {
        &,
        &:focus,
        &:hover {
            color: #bfcbd9;
            cursor: not-allowed;
            background-image: none;
            background-color: #eef1f6;
            border-color: #d1dbe5;
        }

        &.text {
            background-color: transparent;
        }
    }

}
</style>